<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="./jquery-3.6.0.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
    <style>
        *
        {
            margin: 0;
            padding: 0;
        }
        form
        {
            width: 1080px;
            height: 1545px;
            margin-left: 20px;
        }
        .top
        {
            height: 30px;
            width: 100%;
            display: flex;
            align-items: center;
            border-bottom: 1px solid gray;

        }

        .input-select-area
        {
            height: 155px;
        }

        .input-select-area-top
        {
            margin-top: 30px;
        }

        .input-select-area-bottom-area1
        {
            display: flex;
            justify-content: space-between;
        }

        .input-select-area-bottom-area2
        {
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
        }

        .input-select-area-bottom-area2-1
        {
            display: flex;
            justify-content: space-between;
            width: 750px;
        }
        .input-select-area-bottom-area2-2
        {
            display: flex;
            justify-content: space-between;
            width: 230px;
        }

        .area2-2-bt1
        {
            width: 80px;
            height: 30px;
            background-color: #1296db;
            border: none;
        }

        .message-bottom
        {
            margin-top: 10px;
            width: 200px;
            display: flex;
            justify-content: space-between;
        }

        .list-title
        {
           color: white;
           background-color: gray; 
           text-align: center;
           font-size: 10px;
           width: 100%;
           height: 30px;

        }

        .message-table
        {
            width: 1080px;
            border:solid 1px black;
            border-collapse: collapse;
            border-spacing: 0;
            margin-top: 10px;
            
        }
      
        td
        {
            border: 1px solid black;
            text-align: center;
        }
        .radio-style
        {
            display: flex;
            justify-content: space-around;
        }

        .radio
        {
            width: 10px;
            height: 10px;
            border: 1px solid black;

        }

        .footer
        {
            margin-top: 20px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

        .select-style
        {
            width: 120px;
            height: 34px;
            background: gray;
            color: white;
        }

        .footer-right
        {
            display: flex;
        align-items: center;
        justify-content: space-between;
        }
    
    </style>
</head>
<body>
    <form>
    <div class="top"><span>医疗医技异常事件查询</span></div>
    <div class="input-select-area">
        <div class="input-select-area-top"><b><span>|</span>查询条件</b></div>
        <div class="input-select-area-bottom">
            <div class="input-select-area-bottom-area1">
            <div>不良事件编号:<input style="width: 200px;height:25px"></div>
            <div>所在科室:<input style="width: 160px;height:25px"></div>
            <div>发生场所:<input style="width: 140px;height:25px"></div>
            <div>不良事件状态:<input style="width: 140px;height:25px"></div>
            </div>

            <div class="input-select-area-bottom-area2">
                <div class="input-select-area-bottom-area2-1">
                <div>不良事件编号:<input style="width: 200px;height:25px"></div>
                <div>所在科室:<input style="width: 160px;height:25px"></div>
                </div>

                <div class="input-select-area-bottom-area2-2">
                <div><button class="area2-2-bt1">查询</button></div>
                <div><button class="area2-2-bt1">清除</button></div>
                </div>
                </div>

        </div>
       

    </div>

<!--模态框1-->
    <div class="message">
        <div><b><span>|</span>医疗医技异常报告列表</b></div>
        <div style="display: flex; text-align:center;width: 300px;">
            <button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#add" style="height: 30px;background-color: #1296db;font-size: 15px;padding: 5px;">
                修改类型
            </button>
            <div class="message-bottom" style="margin-left: 0px;">
                <div class="modal fade" id="add" tabindex="-1" role="dialog">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">修改类型</h4>
                            </div>


                            <div class="modal-body" style="height:500px;">
                                <form>
                                   <select style="width:500px;height: 40px;">
                                    <option>感染病例报告卡记</option>
                                    <option></option>
                                    <option></option>
                                   </select>
                                </form>
                            </div>
                            <div class="modal-footer">
                               
                                <button type="button" class="btn btn-primary">保存</button>
                            </div>
                        </div>
                    </div>
               </div> 
            </div> 




<!-- 模态框2 -->
<div style="display: flex; text-align:center;width: 300px;">
    <button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#add2" style="height: 30px;background-color: #1296db;font-size: 15px;padding: 5px;">
        修改类型
    </button>
    <div class="message-bottom">
        <div class="modal fade" id="add2" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content" style="width:700px;">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">追踪</h4>
                    </div>


                    <div class="modal-body" style="height:500px;">
                        <form>
                           <div style="margin-left:0;width:500px;display: flex;">
                            
                            <div>
                               <span>|</span>
                                <span>选择追踪科室</span>
                            </div>
                            
                           </div>

                           <div style="width:630px;height:300px;border: 1px solid black;">

                           </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                       
                        <button type="button" class="btn btn-primary">保存</button>
                    </div>
                </div>
            </div>
       </div> 
    </div> 
</div> 
    







                <!-- <div> <button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#add2" style="height: 30px;background-color: #1296db;font-size: 15px;padding: 5px;">
                    事件追踪
                </button>
                <div class="message-bottom">
                    <div class="modal fade" id="add" tabindex="-1" role="dialog">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header2">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                            aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="myModalLabel">事件追踪</h4>
                                </div>
                                <div class="modal-body">
                                    <form>
                                        <div class="form-group">
                                            <label for="exampleInputEmail1">账号</label>
                                            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                                          </div>
                                          <div class="form-group">
                                            <label for="exampleInputPassword1">密码</label>
                                            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                                          </div>
                                          <div class="checkbox">
                                            <label>
                                              <input type="checkbox"> 是否记住密码
                                            </label>
                                          </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                               
                                    <button type="button" class="btn btn-primary">保存</button>
                                </div>
                               
                            </div>
                        </div>
                    
            </div>
            </div>
        </div> -->
    </div>


    <div>
        <div id="div1"><table class="message-table">
            <tbody>
                <tr class="list-title">
                    <td>选择</td>
                    <td>不良事件编码</td>
                    <td>不良事件状态</td>
                    <td>上报科室</td>
                    <td>上报日期</td>
                    <td>发生日期</td>
                    <td>发生场所</td>

                </tr>
                <tr>
                    
                    <td><div class="radio-style"><div class="radio"></div></div></td>
                    <td>01</td>
                    <td>00</td>
                    <td>01</td>
                    <td>00</td>
                    <td>01</td>
                    <td>00</td>
                </tr>
                <tr>
                    
                    <td><div class="radio-style"><div class="radio"></div></div></td>
                    <td>01</td>
                    <td>00</td>
                    <td>01</td>
                    <td>00</td>
                    <td>01</td>
                    <td>00</td>
                </tr>
                <tr>
                    
                    <td><div class="radio-style"><div class="radio"></div></div></td>
                    <td>01</td>
                    <td>00</td>
                    <td>01</td>
                    <td>00</td>
                    <td>01</td>
                    <td>00</td>
                </tr>
                <tr>
                    <td><div class="radio-style"><div class="radio"></div></div></td>
                    <td>01</td>
                    <td>00</td>
                    <td>01</td>
                    <td>00</td>
                    <td>01</td>
                    <td>00</td>
                </tr>
                <tr>
                    <td><div class="radio-style"><div class="radio"></div></div></td>
                    <td>01</td>
                    <td>00</td>
                    <td>01</td>
                    <td>00</td>
                    <td>01</td>
                    <td>00</td>
                </tr>
                <tr>
                    <td><div class="radio-style"><div class="radio"></div></div></td>
                    <td>01</td>
                    <td>00</td>
                    <td>01</td>
                    <td>00</td>
                    <td>01</td>
                    <td>00</td>
                </tr>
                <tr>
                    <td><div class="radio-style"><div class="radio"></div></div></td>
                    <td>01</td>
                    <td>00</td>
                    <td>01</td>
                    <td>00</td>
                    <td>01</td>
                    <td>00</td>                
                </tr>
                <tr>
                    <td><div class="radio-style"><div class="radio"></div></div></td>
                    <td>01</td>
                    <td>00</td>
                    <td>01</td>
                    <td>00</td>
                    <td>01</td>
                    <td>00</td>                
                </tr>
                <tr>
                    <td><div class="radio-style"><div class="radio"></div></div></td>
                    <td>01</td>
                    <td>00</td>
                    <td>01</td>
                    <td>00</td>
                    <td>01</td>
                    <td>00</td>                
                </tr>
                <tr>
                    <td><div class="radio-style"><div class="radio"></div></div></td>
                    <td>01</td>
                    <td>00</td>
                    <td>01</td>
                    <td>00</td>
                    <td>01</td>
                    <td>00</td>
                </tr>
                <tr>
                    <td><div class="radio-style"><div class="radio"></div></div></td>
                    <td>01</td>
                    <td>00</td>
                    <td>01</td>
                    <td>00</td>
                    <td>01</td>
                    <td>00</td>
                </tr>
                <tr>
                    <td><div class="radio-style"><div class="radio"></div></div></td>
                    <td>01</td>
                    <td>00</td>
                    <td>01</td>
                    <td>00</td>
                    <td>01</td>
                    <td>00</td>
                <tr>
                    <td><div class="radio-style"><div class="radio"></div></div></td>
                    <td>01</td>
                    <td>00</td>
                    <td>01</td>
                    <td>00</td>
                    <td>01</td>
                    <td>00</td>
                </tr>
                <tr>
                    <td><div class="radio-style"><div class="radio"></div></div></td>
                    <td>01</td>
                    <td>00</td>
                    <td>01</td>
                    <td>00</td>
                    <td>01</td>
                    <td>00</td>
                </tr>
                <tr>
                    <td><div class="radio-style"><div class="radio"></div></div></td>
                    <td>01</td>
                    <td>00</td>
                    <td>01</td>
                    <td>00</td>
                    <td>01</td>
                    <td>00</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="footer">
            <div class="footer-right">
                <select class="select-style">
                    <option>15</option>
                    <option>14</option>
                    <option>5</option>
                    <option>1</option>
                 </select>
                 <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    </div>
    </form>
    
</body>
</html>